import {FC,useState,useEffect} from 'react'
import AssetSearch from '../AssetSearch'
import {Table} from 'antd'
import PaginationList from '@/components/PaginationList'
import {getUrlInfo} from '@/api/asset'
import { useRequest } from 'ahooks'
import { useSearchParams } from 'react-router-dom'

 const AssetUrlInfo: FC = () => {
    const columns = [
        {
            title: 'URL',
            dataIndex: 'url',
            key: 'url',
        }, 
        {
            title: '来源',
            dataIndex: 'source',
            key: 'source',
        }, 
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '输入',
            dataIndex: 'input',
            key: 'input',
        }, 
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
        }, 
    ]

    const [UrlInfo,setUrlInfo] = useState([])
    const [pageTotal,setPageTotal] = useState(0)
    const [searchParams] = useSearchParams()

    // 获取资产信息
    const {run} = useRequest(async ()=>{
        const search = searchParams.get('search') || ""
        const page = parseInt(searchParams.get('page') || "1")
        const pageSize = parseInt(searchParams.get('size') || "10")
        const res = await getUrlInfo({pageIndex:page,pageSize,search})
        return res
    },{
        manual:true,
        onSuccess(data:any){
            setUrlInfo(data?.data?.list)
            setPageTotal(data?.data?.total)
        }
    })

  // 首次，和params改变时重新获取数据
    useEffect(()=>{
        run()
    },[searchParams])
    return <div>
        <AssetSearch assetInfo={UrlInfo}/>
        <div>
        <Table dataSource={UrlInfo} columns={columns} pagination={false} />
        <PaginationList total={pageTotal} />
        </div>
    </div>
}
export default AssetUrlInfo